<template>
	<view class="identity p20" v-if="!haveData">
		<view class="butList dis">
			<view class="butItem" :class="tab == '新生' ? 'active' : ''" @click="changeTab('新生')">新生</view>
			<view class="butItem" :class="tab == '在校生' ? 'active' : ''" @click="changeTab('在校生')">在校生</view>
			<view class="butItem" :class="tab == '毕业生' ? 'active' : ''" @click="changeTab('毕业生')">毕业生</view>
			<view class="butItem" :class="tab == '教职工' ? 'active' : ''" @click="changeTab('教职工')">教职工</view>
		</view>
		<view class="form p20">
			<view class="formItem dis">
				<view class="lable dis">
					<text>*</text>
					真实姓名:
				</view>
				<view class="value">
					<up-input v-model="form.realName" placeholder="请输入真实姓名" border="none"></up-input>
				</view>
			</view>
			<view class="formItem dis">
				<view class="lable">手机号:</view>
				<view class="value">
					<up-input v-model="form.phone" placeholder="请输入手机号" border="none"></up-input>
				</view>
			</view>
			<view class="formItem dis">
				<view class="lable">
					<text>*</text>
					入学年份:
				</view>
				<view class="value">
					<picker @change="bindPickerChange" :value="indexEn" :range="array">
						<view class="select">{{ array[indexEn] }}</view>
					</picker>
				</view>
			</view>
			<view class="more dis" v-if="!showMore" @click="changeShowMore">
				<view class="lable">更多信息</view>
				<view class="icon">
					<up-icon name="arrow-down" color="#666" size="18"></up-icon>
				</view>
			</view>
			<template v-else>
				<view class="formItem dis">
					<view class="lable dis">学号:</view>
					<view class="value">
						<up-input v-model="form.studentNo" placeholder="请输入学号" border="none"></up-input>
					</view>
				</view>
				<view class="formItem dis">
					<view class="lable">性别:</view>
					<view class="value" @click="changeSex">
						<view class="select">{{ form.sex == 0 ? '男' : form.sex == 1 ? '女' : '请选择性别' }}</view>
					</view>
				</view>
				<view class="formItem dis">
					<view class="lable">学校/专业:</view>
					<view class="value">
						<up-input v-model="form.major" placeholder="请输入宿舍楼" border="none"></up-input>
					</view>
				</view>
				<view class="formItem dis">
					<view class="lable dis">宿舍楼:</view>
					<view class="value">
						<up-input v-model="form.dormitory" placeholder="请输入宿舍楼" border="none"></up-input>
					</view>
				</view>
				<view class="formItem dis">
					<view class="lable dis">班级:</view>
					<view class="value">
						<up-input v-model="form.classTitle" placeholder="请输入班级" border="none"></up-input>
					</view>
				</view>
			</template>
		</view>
		<view class="noform p20">
			<view class="formTit">请上传录取通知书/学生证/校园卡/学位证/毕业证照片</view>
			<view class="formLable">相关资料仅用于校园身份认证，并受隐私保护协议与相关法律保护，将严格保密</view>
			<view class="addImg dis">
				<view class="imgItem">
					<view class="imgA"></view>
					<view class="imgL">实例</view>
				</view>
				<view class="imgItem">
					<view class="imgA dis" @click="uploadImgFun">
						<image v-if="!idImgUrl" class="iconm" src="/pages/static/11.png" mode=""></image>
						<view class="imgDom" v-else>
							<image :src="idImgUrl" mode="aspectFill"></image>
							<view class="offImg" @click.stop="delImg(item)">x</view>
						</view>
					</view>
					<view class="imgL">点击拍摄证件照片</view>
				</view>
			</view>
			<view class="formCard p20">
				<view class="formCardTit">说明：</view>
				<view class="formCardCon">
					<view>1.请在本页面提交一张学校录取通知书/学生证/校园卡/毕业证书的正面照片。</view>
					<view>
						2.照片须保持清晰，且须
						<text>保证姓名清晰可见</text>
						，但我们
						<text>不会采集或分析其中的信息，可以自行对学号、序列号、条形码等信息进行覆盖处理</text>
						。
					</view>
					<view>3.后台将人工审核，保证信息符合要求。</view>
					<view>4.对于蓄意伪造、冒用以及欺诈等行为，本方保留封禁乃至包案的权力。</view>
					<view>5.其他用户无法查看您的实名认证信息。</view>
				</view>
			</view>
		</view>
		<view class="agreement dis">
			<view class="agL">
				<up-checkbox :customStyle="{ marginBottom: '8px' }" label="" name="agree" usedAlone v-model:checked="aloneChecked"></up-checkbox>
			</view>
			<view class="agR">
				我已阅读并同意
				<text class="agRT">《校园跑腿平台发单系统协议》</text>
			</view>
		</view>
		<view class="button" v-if="aloneChecked" @click="submit">提交</view>
		<view class="button noOk" v-else>提交</view>
	</view>
	<view class="haveData p30" v-else>
		<view class="formData">
			<view class="item dis">
				<view class="lable">认证学校:</view>
				<view class="value">{{ haveData.departmentName }}</view>
			</view>
			<view class="item dis">
				<view class="lable">姓名:</view>
				<view class="value">{{ haveData.name }}</view>
			</view>
			<view class="item dis">
				<view class="lable">手机号:</view>
				<view class="value">{{ haveData.phone }}</view>
			</view>
			<view class="item dis">
				<view class="lable">证件:</view>
				<view class="value">
					<view class="valImg">
						<image :src="haveData.credential" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="item dis">
				<view class="lable">审核状态:</view>
				<view class="value">
					<view class="valType" :class="auditStatus == 2 ? 'err' : auditStatus == 1 ? 'succeed' : ''">
						{{ auditStatus == 2 ? '审核不通过' : auditStatus == 0 ? '待审核' : '审核通过' }}
					</view>
				</view>
			</view>
			<view class="item dis" v-if="auditStatus == 2 && haveData.rejectReason">
				<view class="lable">驳回原因:</view>
				<view class="value">{{ haveData.rejectReason }}</view>
			</view>
		</view>
		<view class="formBut" @click="againBut">{{ auditStatus == 2 ? '重新提交' : '返回' }}</view>
	</view>
	<up-modal content="提交成功，待审核" title="提示" :show="show" contentTextAlign="center" confirmButtonShape="circle">
		<template #confirmButton>
			<view class="custom_btn" @click="handleConfirm">确定</view>
		</template>
	</up-modal>
</template>

<script setup>
import { codeSend, idApply, identityAxios } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const current = ref(1);
const schoolInfo = ref({});
const tab = ref('新生');
const changeTab = (str) => {
	tab.value = str;
};
onShow(() => {
	// console.log('onShow');
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		form.value.departmentId = school.schoolId;
	}
	identityAxiosFun();
});

// 更多信息
const showMore = ref(false);
const changeShowMore = () => {
	showMore.value = !showMore.value;
};
// 协议
const aloneChecked = ref(false);

const haveData = ref({});
const form = ref({
	departmentId: null,
	userType: '',
	realName: '',
	phone: '',
	enrollmentYear: '',
	studentNo: '',
	sex: null, //0=男；1=女；2=未知
	major: '',
	dormitory: '',
	classTitle: '',
	credential: ''
});
const auditStatus = ref(0); // 0待审核 1审核通过 2审核不通过
// 获取身份认证信息
const identityAxiosFun = async () => {
	const res = await identityAxios();
	console.log(res);
	if (res.code == 0) {
		haveData.value = res.data.userIdentity;
		auditStatus.value = res.data.userIdentity.auditStatus;
	} else {
		haveData.value = false;
	}
};
const againBut = () => {
	if (auditStatus.value == 0 || auditStatus.value == 1) {
		goBack();
	} else {
		form.value = {
			name: haveData.value.name,
			phone: haveData.value.phone,
			authCode: '',
			mode: ''
		};
		idImgUrl.value = haveData.value.credential;
		haveData.value = false;
	}
};

// 学校/专业
const array = ref(['2020', '2021', '2022', '2023', '2024', '2025']);
const indexEn = ref(5);
const bindPickerChange = (e) => {
	indexEn.value = e.detail.value;
};

// 选择性别
const changeSex = () => {
	uni.showActionSheet({
		itemList: ['男', '女'],
		success: (res) => {
			// console.log(res.tapIndex);
			form.value.sex = res.tapIndex;
		},
		fail: function (res) {
			console.log(res.errMsg);
		}
	});
};

const isPhoneValid = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone);
});
// 提交
const show = ref(false);
const submit = async () => {
	form.value.userType = tab.value;
	if (!idImgUrl.value) {
		uni.showToast({
			title: '请上传证件',
			icon: 'none'
		});
		return;
	}
	if (!form.value.realName) {
		uni.showToast({
			title: '请输入真实姓名',
			icon: 'none'
		});
		return;
	}
	// if (!form.value.enrollmentYear) {
	// 	uni.showToast({
	// 		title: '请选择入学年份',
	// 		icon: 'none'
	// 	});
	// 	return;
	// }
	if (!isPhoneValid.value) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		});
		return;
	}
	const data = {
		departmentId: form.value.departmentId,
		userType: form.value.userType,
		realName: form.value.realName,
		phone: form.value.phone,
		enrollmentYear: array.value[indexEn.value],
		studentNo: form.value.studentNo,
		sex: form.value.sex, //0=男；1=女；2=未知
		major: form.value.major,
		dormitory: form.value.dormitory,
		classTitle: form.value.classTitle,
		credential: form.value.credential
	};
	const res = await idApply(data);
	if (res.code == 0) {
		show.value = true;
	} else {
		uni.showToast({
			title: '提交失败',
			icon: 'none'
		});
	}
};
const handleConfirm = () => {
	show.value = false;
	goBack();
};
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};

// 上传图片
const idImgUrl = ref('');
const uploadImgFun = async () => {
	if (idImgUrl.value) return;
	const res = await uploadImage();
	if (res.code == 0) {
		idImgUrl.value = res.data.imgUrl;
	} else {
		uni.showToast({
			title: res.message,
			duration: 2000
		});
	}
};
const delImg = () => {
	idImgUrl.value = '';
};
</script>

<style lang="scss" scoped>
.identity {
	.butList {
		justify-content: center;
		align-items: center;
		.butItem {
			margin-right: 30rpx;
			width: 136rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #ffffff;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #4f77e0;
		}
		.active {
			background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
			color: #fff;
		}
	}
	.form {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.formItem {
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			height: 75rpx;
			line-height: 75rpx;
			.lable {
				justify-content: center;
				align-items: center;
				padding-right: 10rpx;
				width: 150rpx;
				color: #666;
				text-align: right;
				text {
					color: #e53f31;
				}
			}
			.value {
				flex: 1;
				.select {
					color: #c0c4cc;
				}
			}
		}
		.more {
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			height: 75rpx;
			line-height: 75rpx;
			color: #666;
			.icon {
				padding-left: 20rpx;
			}
		}
	}
	.noform {
		.formTit {
			font-size: 26rpx;
			font-weight: 700;
		}
		.formLable {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #969696;
		}
		.addImg {
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			.imgItem {
				width: 320rpx;
				.imgA {
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 150rpx;
					border-radius: 20rpx;
					background: #fff;
					overflow: hidden;
					.imgDom {
						position: relative;
						width: 100%;
						height: 100%;
						.offImg {
							position: absolute;
							right: 0;
							top: 0;
							width: 40rpx;
							height: 40rpx;
							line-height: 30rpx;
							font-size: 26rpx;
							text-align: center;
							border-radius: 0rpx 10rpx 0rpx 40rpx;
							background: #000;
							color: #fff;
						}
					}
					.iconm {
						width: 75rpx;
						height: 75rpx;
					}
				}
				.imgL {
					padding-top: 15rpx;
					width: 100%;
					font-size: 24rpx;
					color: #969696;
					text-align: center;
				}
			}
		}
		.formCard {
			border-radius: 20rpx;
			background: #fff;
			font-size: 24rpx;
			color: #969696;
			.formCardCon {
				view {
					padding: 10rpx 0;
				}
				text {
					color: #e53f31;
				}
			}
		}
	}
	.agreement {
		align-items: center;
		.agR {
			margin-top: -8rpx;
			color: #606266;
			font-size: 30rpx;
			.agRT {
				color: #5384f7;
			}
		}
	}

	.button {
		margin: 0 auto;
		width: 204rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	}
	.noOk {
		background: linear-gradient(44deg, #a9befa 0%, #aaa4f4 100%);
	}
}
.haveData {
	.formData {
		width: 100%;
		.item {
			align-items: center;
			border-bottom: 2rpx solid #f5f6f8;
			.lable {
				width: 190rpx;
				line-height: 90rpx;
				color: #646566;
			}
			.value {
				color: #969799;
				.valImg {
					margin: 30rpx 0;
					width: 152rpx;
					height: 152rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #8eaefa;
				}
				.valType {
					margin: 30rpx 0;
					padding: 0 10rpx;
					line-height: 43rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #00a8f6;
					border: 2rpx solid #00a8f6;
				}
				.err {
					color: #fa2c19;
					border: 2rpx solid #fa2c19;
				}
				.succeed {
					color: #07c160;
					border: 2rpx solid #07c160;
				}
			}
		}
	}
	.formBut {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 35rpx;
		color: #fff;
		background-color: #00a8f6;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
.custom_btn {
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.codeT {
	color: #0087e0;
}
image {
	width: 100%;
	height: 100%;
}
.u-input {
	background-color: #fff !important;
}
</style>
